index.tsx•3.14 kB
import { useState } from "react";
import { KeyboardAvoidingView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Stack, useLocalSearchParams } from "expo-router";
import BookmarkAssetView from "@/components/bookmarks/BookmarkAssetView";
import BookmarkLinkTypeSelector, {
BookmarkLinkType,
} from "@/components/bookmarks/BookmarkLinkTypeSelector";
import BookmarkLinkView from "@/components/bookmarks/BookmarkLinkView";
import BookmarkTextView from "@/components/bookmarks/BookmarkTextView";
import BottomActions from "@/components/bookmarks/BottomActions";
import FullPageError from "@/components/FullPageError";
import FullPageSpinner from "@/components/ui/FullPageSpinner";
import useAppSettings from "@/lib/settings";
import { api } from "@/lib/trpc";
import { useColorScheme } from "nativewind";
import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
export default function BookmarkView() {
const insets = useSafeAreaInsets();
const { slug } = useLocalSearchParams();
const { colorScheme } = useColorScheme();
const isDark = colorScheme === "dark";
const { settings } = useAppSettings();
const [bookmarkLinkType, setBookmarkLinkType] = useState<BookmarkLinkType>(
settings.defaultBookmarkView,
);
if (typeof slug !== "string") {
throw new Error("Unexpected param type");
}
const {
data: bookmark,
error,
refetch,
} = api.bookmarks.getBookmark.useQuery({
bookmarkId: slug,
includeContent: false,
});
if (error) {
return <FullPageError error={error.message} onRetry={refetch} />;
}
if (!bookmark) {
return <FullPageSpinner />;
}
let comp;
let title = null;
switch (bookmark.content.type) {
case BookmarkTypes.LINK:
title = bookmark.title ?? bookmark.content.title;
comp = (
<BookmarkLinkView
bookmark={bookmark}
bookmarkPreviewType={bookmarkLinkType}
/>
);
break;
case BookmarkTypes.TEXT:
title = bookmark.title;
comp = <BookmarkTextView bookmark={bookmark} />;
break;
case BookmarkTypes.ASSET:
title = bookmark.title ?? bookmark.content.fileName;
comp = <BookmarkAssetView bookmark={bookmark} />;
break;
}
return (
<KeyboardAvoidingView
style={{ flex: 1, paddingBottom: insets.bottom + 8 }}
behavior="height"
>
<Stack.Screen
options={{
headerTitle: title ?? "",
headerBackTitle: "Back",
headerTransparent: false,
headerShown: true,
headerStyle: {
backgroundColor: isDark ? "#000" : "#fff",
},
headerTintColor: isDark ? "#fff" : "#000",
headerRight: () =>
bookmark.content.type === BookmarkTypes.LINK ? (
<BookmarkLinkTypeSelector
type={bookmarkLinkType}
onChange={(type) => setBookmarkLinkType(type)}
bookmark={bookmark}
/>
) : undefined,
}}
/>
{comp}
<BottomActions bookmark={bookmark} />
</KeyboardAvoidingView>
);
}